<template>
	<view class="postDetail" :style="{paddingBottom:isCommentEdit==true?'150upx':'75upx'}">
			<view class="postContent">
				<view class="topMedia">
					<image v-if="p_item.type=='image'" mode="widthFix" :src="p_item.image.big[0]" class="topImage"></image>
					<video v-if="p_item.type=='video'" class="topImage" :src="p_item.video.video[0]" :poster="p_item.video.thumbnail[0]"></video>
					<!--gif动图 -->
					<image :src="p_item.gif.images[0]" v-if="p_item.type=='gif'" class="topImage" mode="widthFix"></image>
				</view>
				<view class="topText">
					<text class="cate" v-if="p_item.cate.length>0">#{{p_item.cate}}#</text>{{p_item.text}}
				</view>
				<view class="bottomZanCai">
					<view class="zan">
						<text class="iconfont icon-zan"></text>{{p_item.up}}
					</view>
					<view class="cai">
						<text class="iconfont icon-cai"></text>{{p_item.down}}
					</view>
					<view class="forward">
						<text class="iconfont icon-forward"></text>{{p_item.forward}}
					</view>
				</view>
			</view>
			<!-- 热门评论-->
			<view class="hotComment" v-if="comment&&comment.hot.list.length>0">
				<view class="hotCommentTitle">热门评论</view>
				<view class="commentItem" v-for="(h_item,index) in comment.hot.list" :key="index">
					<!-- 左边的图像-->
					<view class="leftImage">
						<image :src="h_item.user.profile_image" class="userPhoto"></image>
					</view>
					<!--回复选项右边的部分 -->
					<view class="right">
						<view class="topUser">
							<view class="centerNickName">{{h_item.user.username}}</view>
							<view class="rightZanCai">
								<view class="zan">
									<text class="iconfont icon-zan"></text>{{h_item.like_count}}
								</view>
								<view class="cai">
									<text class="iconfont icon-cai"></text>{{h_item.hate_count}}
								</view>
							</view>
						</view>
						<view class="content">
							{{h_item.content}}
						</view>
					</view>
				</view>
			</view>
			<!-- 最新评论-->
			<view class="hotComment" v-if="comment">
				<view class="hotCommentTitle">热门评论</view>
				<view class="commentItem" v-for="(n_item,index) in comment.normal.list" :key="index">
					<!-- 左边的图像-->
					<view class="leftImage">
						<image :src="n_item.user.profile_image" class="userPhoto"></image>
					</view>
					<!--回复选项右边的部分 -->
					<view class="right">
						<view class="topUser">
							<view class="centerNickName">{{n_item.user.username}}</view>
							<view class="rightZanCai">
								<view class="zan">
									<text class="iconfont icon-zan"></text>{{n_item.like_count}}
								</view>
								<view class="cai">
									<text class="iconfont icon-cai"></text>{{n_item.hate_count}}
								</view>
							</view>
						</view>
						<view class="content">
							{{n_item.content}}
						</view>
					</view>
				</view>
			</view>
		<view class="editPostComment">
			<text class="txtPostComment" v-if="isCommentEdit==false" @tap.stop="isCommentEdit=true">请输入评论</text>
			<textarea @blur="isCommentEdit=false" :auto-focus="true" style="height: 150upx;" v-if="isCommentEdit==true"   class="txtPostComment areaComment" placeholder="请输入评论" ></textarea>
			<text>发送</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//当前贴子项
				p_item: null,
				postId: "",
				comment: null,
				//是否正在书写评论
				isCommentEdit:false
			};
		},
		onLoad(options) {
			//读取缓存里面的数据
			this.p_item = uni.getStorageSync("p_item");
			if (this.p_item == null) {
				uni.showToast({
					title: "获取数据失败"
				});
			} else {
				this.postId = options.id;
				this.getComment();
			}
		},
		onPullDownRefresh() {
			this.getComment();
			uni.stopPullDownRefresh();
		},
		methods: {
			getComment() {
				uni.showLoading({
					title:"正在获取回复信息"
				});
				var commentUrl = `https://www.softeem.xin/c.api/topic/comment_list/${this.postId}/0/budejie-android-8.0.1/0-20.json`;
				uni.request({
					url: commentUrl,
					success: res => {
						this.comment = res.data;
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>

<style scoped>
	.postDetail{
	}
	.postDetail-top{
		flex: 1;
		overflow-y:auto ;
	}
	.editPostComment{
		border-top: 1px solid lightgray;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 10upx 20upx;
		position: fixed;
		bottom: 0px; 
		left: 0px;
		width: 100%;
		background-color: white;
	}
	.txtPostComment{
		flex: 1;
		width: 100%;
		border-radius: 35upx;
		background-color: #F2F2F2;
		box-sizing: border-box;
		padding: 15upx 10upx;
		font-size: 28upx;
	}
	.txtPostComment.areaComment{
		padding: 20upx;
	}
	.editPostComment>text{
		width: 100upx;
		font-size: 28upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.topImage {
		width: 100%;
		display: block;
	}

	.topText {
		box-sizing: border-box;
		padding: 20upx;
		font-size: 28upx;
		font-weight: 600;
	}

	.bottomZanCai {
		display: flex;
		flex-direction: row;
		height: 50upx;
		font-size: 28upx;
		justify-content: flex-start;
		box-sizing: border-box;
		padding-left: 20upx;
		border-bottom: 1px solid #ececec;
	}

	/*+号选择器代表兄弟选择器,在这个地方指的是排除第一项*/
	.bottomZanCai>view+view {
		margin-left: 50upx;
	}

	.bottomZanCai>view>text {
		/* 图标与文字间距10 */
		margin-right: 10upx;
	}

	.topText .cate {
		font-weight: bold;
		color: orange;
	}

	.hotCommentTitle {
		box-sizing: border-box;
		padding: 20upx 10upx 0upx 10upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.commentItem {
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		padding: 10upx 10upx;
	}

	.commentItem .leftImage {
		width: 60upx;
		height: 60upx;
		border-radius: 30upx;
	}

	.userPhoto {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 30upx;
	}

	.commentItem .right {
		flex: 1;
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #f2f2f2;
	}

	.commentItem .right .topUser {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 60upx;
		box-sizing: border-box;
		padding: 0upx 20upx;
	}

	.centerNickName {
		flex: 1;
		font-size: 26upx;
	}

	.rightZanCai {
		display: flex;
		font-size: 28upx;
		color: gray;
	}

	.commentItem .right .content {
		font-size: 30upx;
		box-sizing: border-box;
		padding: 10upx 20upx;
		font-weight: bold;
		line-height: 1.7;
	}

	.rightZanCai .zan {
		margin: 0px 20upx;
	}

	.rightZanCai .iconfont {
		margin: 0 10upx;
	}
</style>
